<template>
  <el-main style="padding: 0">
    <el-image :src="bgImgUrl" fit="fill" style="width: 100%;height: 930px;"></el-image>
    <el-card class="loginBox">
      <el-row>
        <el-col>
          <img src="" alt="">
          <h1 id="title">社会培训资源管理系统</h1>
        </el-col>
        </el-row>
          <el-form>
            <el-row justify="center">
              <el-col :span="20">
                <p>账号</p>
                <el-input v-model="username" type="text" name="username"></el-input>
                <p>密码</p>
                <el-input v-model="password" type="password" name="password"></el-input>
              </el-col>
            </el-row>
            <el-row justify="center" style="margin: 10px 0px 10px 0px;">
              <el-col :span="20">
                <el-checkbox v-model="remUser">记住账号</el-checkbox>
              </el-col>
            </el-row>
            <el-row justify="center">
                <el-col :span="20">
                    <el-button type="primary" style="width: 350px;" @click="login">立即登录</el-button>
                    <p>没有账号？请联系管理员开通</p>
                </el-col>
            </el-row>
          </el-form>
    </el-card>
  </el-main>
</template>
   
<script>
  import axios from "axios";
    export default {
        data() {
            return {
                username:"",
                password:"",
                remUser:false,
                bgImgUrl:"../img/background.jpeg",
            };
        },
        methods:{
            login(){
              if(!this.remUser){
                localStorage.removeItem("user");
              }
              return  axios.post(this.$host+"/login", {
                username: this.username,
                password: this.password
              },{
                transformRequest: [
                  function (data) {
                    let ret = ''
                    for (let it in data) {
                      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    ret = ret.substring(0, ret.lastIndexOf('&'));
                    return ret
                  }
                ],
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }
              }).then(response =>{
                if(response.status === 200){
                  if(this.remUser){
                    localStorage.setItem("user",this.username);
                  }
                  this.$message.success("登录成功");
                  this.$router.replace("/index");
                }else{
                  this.$message.error("登录失败,未知错误");
                }
              }).catch(error =>{
                this.$message.error(error.response.data.message);
              })
            },
        },
      created() {
          let username = localStorage.getItem("user");
          if(username){
            this.username = username;
            this.remUser = true;
          }
      }
    }
</script>

<style scoped>
body{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.loginBox{
    height:479px;
    width:460px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#title{
    font-size: 20px;
    text-align: center;
}
</style>